import { NavigateService } from './../../../service/navigate.service';
import { MdDialog, MdDialogRef, MdDialogConfig } from "@angular/material";
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';

export class OrderTableService {
    private tmp: OrderTable;
    static Current: OrderTableService = new OrderTableService();
    dialogRef: MdDialogRef<OrderTable>;
    constructor() { }
    config: MdDialogConfig = {
        disableClose: false,
        width: '100%',
        position: {
            top: '0',
            bottom: '0',
            left: '0',
            right: '0',
        }
    }
    Regist(tmp: OrderTable) {
        this.tmp = tmp;
    }

    Open(dialog: MdDialog, tbs, isChooseAll?: boolean) {
        this.dialogRef = dialog.open(OrderTable, this.config);
        // this.tmp.visible = true;
        this.tmp.tables = tbs;
        this.tmp.selectedTables = [];
        if (isChooseAll) {
            tbs.forEach(element => {
                element.checked = true;
            });
            this.tmp.selectedTables = this.tmp.selectedTables.concat(tbs);
        }
        return new Promise((resolve, reject) => {
            this.dialogRef.afterClosed().subscribe(tables => {
                this.dialogRef = null;
                resolve(tables);
            });
            // this.tmp.onResult = (tables) => {
            //     resolve(tables);
            // }
        });
    }
}

@Component({
    //moduleId: module.id,
    selector: 'div[order-table]',
    template: `
        <md-dialog-header>
            <md-toolbar>
                <div id="dialog-back-btn" class="icon icon-arrow-left2" (click)="cancel()"></div>
                <div class="flex padding-lr-5 text-center">选择下单台桌</div>
            </md-toolbar>
        </md-dialog-header>
        <md-dialog-content fxFlex="100%">
            <div class="padding-5 pct100 layout-column">
                <div class="padding-tb-5" style="border-bottom: 1px solid #CCCCCC;">
                    <md-checkbox [id]="0" [checked]="allCheck()" (change)="setAllCompleted($event.checked)">
                        全选
                    </md-checkbox>
                </div>
                <div class="padding-tb-5" *ngFor="let item of tables;let i = index">
                    <md-checkbox [id]="i+1" [(ngModel)]="item.checked">
                        {{item.name}}
                    </md-checkbox>
                </div>
            </div>
        </md-dialog-content>
        <md-dialog-actions>
            <div class="layout-row pct100 layout-align-center-center">
                <div class="flex layout layout-align-center-center radius-5 order-table-cancel grid" (click)="cancel()" style="margin-right: 3px;">
                    <button md-button>取消</button>
                </div>
                <div class="flex layout layout-align-center-center bgcolor-primary color-white radius-5 order-table-confirm" (click)="ok()" style="margin-left: 3px;">
                    <button md-button >确定</button>
                </div>
            </div>
        </md-dialog-actions>
    `,
    styleUrls: ['../order.component.scss']
})
export class OrderTable implements OnInit {
    visible: boolean = false;
    tables: any[];
    selectedTables: any[] = [];
    chooseAll: boolean = false;
    constructor(
        public dialogRef: MdDialogRef<OrderTable>,
        private navSvr: NavigateService
    ) {
        OrderTableService.Current.Regist(this);
    }

    ngOnInit() {
        this.navSvr.registGoBack(() => {
            let backBtn = document.getElementById("dialog-back-btn");
            if (backBtn) {
                backBtn.click();
            }
        });
    }

    allCheck() {
        if (!this.tables || !this.tables.length) return false;
        return this.tables.every(table => { return table.checked }) ? true : false;
    }

    ok() {
        let selectedTables = [];
        this.tables.forEach(element => {
            if (element.checked) {
                selectedTables.push(element);
            }
        });
        this.dialogRef.close(selectedTables);
        // this.onResult(selectedTables);
        // this.visible = false;
    }

    setAllCompleted(checked: boolean) {
        this.tables.forEach(t => t.checked = checked);
    }

    cancel() {
        this.dialogRef.close([]);
        // this.onResult([]);
        // this.visible = false;
    }
    // onResult;
}